// 该文件用于创建整个应用的路由器
import VueRouter from 'vue-router'
// 引入组件，新建的pages目录下放的是路由组件，components目录下放的是一般组件
import About from '../pages/About'
import Detail from '../pages/Detail'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'

const router = new VueRouter({
  // 路由都在这里定义
  routes: [
    // path就是页面跳转时候匹配的路由，跳转到哪个组件
    {
      name: 'guanyu',
      path: '/about',
      component: About,
      meta: { title: '关于' },
    },
    {
      name: 'zhuye',
      path: '/home',
      component: Home,
      meta: { title: '主页' },
      // 定义二级路由，路由可以多级嵌套，里面还可以有子路由
      children: [
        {
          name: 'xinwen', // 指定了name，使用时候可以直接用这个name来表示多级路由的路径，到 Home.vue 文件看下怎么跳转过来的
          path: 'news',
          component: News,
          meta: { isAuth: true, title: '新闻' },
        },
        {
          name: 'xiaoxi',
          path: 'message',    // 到 Home.vue 文件看下怎么跳转过来的，使用的是指定了 path 
          component: Message,
          meta: { isAuth: true, title: '消息' },
          // 三级路由
          children: [
            {
              name: 'xiangqing',
              // path: 'detail',      // 使用query传参数这样写
              path: 'detail/:id/:title', // 使用params传参数这样写
              component: Detail,
              // props: {    // props第一种写法,值为对象,对象中的key-value都以props形式传给Detail组件
              //     a:1,
              //     b:'hello'
              // },
              props: true, // props第二种写法,值为布尔类型,表示params形式传过来的参数都已props形式传给Detail组件
            },
          ],
        },
      ],
    },
  ],
})

// 全局前置路由守卫：每一次路由切换之前会调用
router.beforeEach((to, from, next) => {
  console.log(to)
  // localStorage中的东西是手动在浏览器中添加的
  // if (to.path === '/home/news' || to.path === '/home/message') {      // 点击news和message时候进入分支
  if (to.meta.isAuth || to.meta.isAuth) {
    // 如果上面配置了meta,可以这样使用，不用指定path或者name来判断
    if (localStorage.getItem('school') === 'aBiu') {
      next() // 不写next的话，就等于拦截了没有放行
    } else {
      alert('无权限查看')
    }
  } else {
    next()
  }
})

// 全局后置路由守卫：每一次路由切换之后会调用，一般用的不多
router.afterEach((to, from, next) => {
  // 替换浏览器title
  document.title = to.meta.title || 'vue路由学习'
})

export default router
